// TA的主页
<template>
  <div class="TalentOther">
    <img
      class="pagebg"
      :src="'https://youyang.mdshuzhi.com/upload/picture/20200802/f2167a3bd3ce40a581bab383cd45138c.jpg'"
    />
    <div class="default">
      <div class="aver">
        <img :src="userInfodata.portrait" />
      </div>
      <div class="left">
        <div class="name">
          {{userInfodata.nick}}
          <span
            class="level"
          >{{userInfodata.vipLevel==0?'普通用户':'LV.'+userInfodata.vipLevel}}</span>
          <template v-if="!isown">
            <span class="follow" v-if="userInfodata.followed==0" @click="follow">+关注</span>
            <span class="cancelfollow" v-else @click="delFollow">取消关注</span>
          </template>
        </div>
        <div class="d">关注 {{userInfodata.followCount}} | 粉丝 {{userInfodata.fansCount}}</div>
        <div class="btn" @click="goMyOther" v-if="!isown">查看我的主页</div>
      </div>
      <div class="bottom">
        <div class="item">
          <span class="n">周排名</span>
          <span class="nums">{{userInfodata.weekRank}}</span>
        </div>
        <div class="item">
          <span class="n">月排名</span>
          <span class="nums">{{userInfodata.monthRank}}</span>
        </div>
        <div class="item">
          <span class="n">总时长</span>
          <span class="nums">{{userInfodata.listenTimes | toHour}}</span>
        </div>
        <div class="share" @click="share">
          <img
            :src="'https://youyang-cdn.mdshuzhi.com/upload/icon_share3.png'"
            class="currentbg"
          />分享
        </div>
      </div>
    </div>
    <div class="lists">
      <div class="tabs">
        <div class="item" :class="albumnavcurrent==1?'on':''" @click="albumnav('1')">
          历史听单
          <img
            class="cir"
            :src="'https://youyang-cdn.mdshuzhi.com/upload/tag_select2.png'"
          />
        </div>
        <div class="item" :class="albumnavcurrent==2?'on':''" @click="albumnav('2')">
          <template v-if="isown">我的收藏</template>
          <template v-else>TA的收藏</template>
          <img class="cir" :src="'https://youyang-cdn.mdshuzhi.com/upload/tag_select2.png'" />
        </div>
        <div class="item" :class="albumnavcurrent==3?'on':''" @click="albumnav('3')">
          互动历史
          <img
            class="cir"
            :src="'https://youyang-cdn.mdshuzhi.com/upload/tag_select2.png'"
          />
        </div>
      </div>
      <template v-if="userInfodata.allowAllAccess==1">
        <!-- 播放全部按钮 -->
        <template v-if="albumnavcurrent!=3">
          <div class="top" v-if="!isselect">
            <div class="all" @click="playall">
              <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_playall.png" />播放全部
            </div>
            <div class="isselect" v-if="isown" @click="isselectBtn">多选</div>
          </div>
          <div class="top" v-else>
            <div class="allselect" :class="isallselect?'on':''" @click="alldelete">全选</div>
            <div class="alldelete" @click="deleteBtn" v-if="albumnavcurrent==1">删除{{ids.length}}个已选</div>
            <div class="alldelete" @click="deleteBtn" v-else>取消{{ids.length}}个已选</div>
          </div>
        </template>
        <!-- 音频列表 -->
        <div class="con" v-if="audioListdata.length > 0">
          <!-- :on-infinite上拉加载 -->
          <scroller
            :on-infinite="infinite"
            ref="myscroller"
            class="scroll"
          >
            <template v-if="albumnavcurrent!=3">
              <div v-for="(item,index) in audioListdata" :key="index" class="item">
                <div class="key" v-if="!isselect">{{index+1}}</div>
                <template v-else>
                  <div
                    class="select"
                    :class="item.select?'on':''"
                    v-if="albumnavcurrent==1"
                    @click="select(item.historyId,index)"
                  ></div>
                  <div
                    class="select"
                    :class="item.select?'on':''"
                    v-else
                    @click="select(item.rid+'-'+item.type+'-'+item.id,index)"
                  ></div>
                </template>
                <div class="pic">
                  <img :src="item.imgUrl" />
                </div>
                <div class="right">
                  <div class="name">
                    <span class="n">{{item.title}}</span>
                  </div>
                  <div class="nums">{{item.duration }} | {{item.playCount}}人播放</div>
                </div>
                <div @click="playall(index)">
                  <img
                    class="play"
                    src="https://youyang-cdn.mdshuzhi.com/upload/icon_listen.png"
                  />
                </div>
              </div>
            </template>
            <template v-else>
              <div
                v-for="(item,index) in audioListdata"
                :key="index"
                class="item"
                @click="goToCommentDetail(item.rid,item.bodyId,item.bodyType,item.action)"
              >
                <div class="time">{{item.createTime}}</div>
                <div class="pic pic1">
                  <img :src="item.portrait" />
                </div>
                <div class="right right1">
                  <!-- 1是栏目，2是合辑，3是音频，4是达人榜，5是评论,6是用户 -->
                  <!-- 用户行为1点赞-->
                  <template v-if="item.action==1">
                    <template v-if="item.type == 1">TA赞了栏目《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 2">TA赞了合辑《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 3">TA赞了音频《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 4">TA赞了达人榜《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 5">
                      <template v-if="item.userId==userInfo.id">
                        TA点赞了
                        <span class="orange">{{item.toUserNick}}</span>的评论
                      </template>
                      <template v-else>
                        <span class="orange">{{item.nick}}</span>赞了TA的评论
                      </template>
                    </template>
                  </template>
                  <!-- 2关注 -->
                  <template v-if="item.action==2">
                    <template v-if="item.userId==userInfo.id">
                      TA关注了
                      <span class="orange">{{item.toUserNick}}</span>
                    </template>
                    <template v-else>
                      <span class="orange">{{item.nick}}</span>关注了TA
                    </template>
                  </template>
                  <!-- 3评论 -->
                  <!-- 1是栏目，2是合辑，3是音频，4是达人榜，5是评论,6是用户 -->
                  <template v-if="item.action==3">
                    <template v-if="item.type == 1">TA评论了栏目《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 2">TA评论了合辑《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 3">TA评论了音频《{{item.bodyTitle}}》</template>
                    <template v-if="item.type == 4">TA评论了达人榜《{{item.bodyTitle}}》</template>

                    <template v-if="item.type == 5">
                      <template v-if="item.userId==userInfo.id">
                        TA回复了
                        <span class="orange">{{item.toUserNick}}</span>的评论
                      </template>
                      <template v-else>
                        <text class="orange">{{item.nick}}</text>回复你的评论
                      </template>
                    </template>
                  </template>
                </div>
              </div>
              <!-- <div class="end" v-if="isEnd">没有更多了~</div> -->
            </template>
          </scroller>
        </div>
        <div class="empty" v-else>
          暂无互动历史
        </div>
      </template>
      <div class="empty" v-else>
          只允许关注的人可见
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import { Toast, MessageBox } from "mint-ui";
import Footer from "@/components/layer/footer";
import url from "@/router/http_conf.js";
export default {
  name: "TalentOther",
  components: {
    Footer,
  },
  data() {
    return {
      title: "TA的主页",
      isselect: false,
      albumnavcurrent: 1,
      userInfo: "",
      userInfodata: "",
      userId: "",
      isown: true,
      audioListdata: [],
      page: 1,
      pageSize: 10,
      isEnd: false,
      ids: [],
      isallselect: false,
      options: null,
    };
  },
  mounted() {
		window.addEventListener('mousewheel',this.handleScroll);
    this.options = this.$route.query;
    console.log("options", this.options);
    if (this.options) {
      this.userId = this.options.id;
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.getUserInfo();
      this.historyList();
    }
  },
	destroyed(){
	  window.removeEventListener('mousewheel',this.handleScroll)
	},
  watch: {
    $route(to, from) {
      this.options = to.query;
      console.log("options", this.options);
      if (this.options) {
        this.userId = this.options.id;
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.getUserInfo();
        this.albumnav(this.albumnavcurrent);
      }
    },
  },
  methods: {
		handleScroll(e){
		  let that = this  //此this指向的是vue
		  console.log(e.wheelDelta)
		  if (e.wheelDelta < 0) {
		      that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
		  } else {
		    that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
		  }
		},
    //跳转到我的主页
    goMyOther() {
      this.$router.replace({
        path: "/TalentOther",
        query: {
          id: this.userInfo.id,
        },
      });
    },
    getUserInfo() {
      controller
        .getUserInfo({
          userId: this.userId,
        })
        .then((res) => {
          console.log("getUserInfo", res);
          this.userInfodata = res.baseData;
          this.userInfodata.portrait =
            this.userInfodata.portrait.indexOf("http") != -1
              ? this.userInfodata.portrait
              : url + this.userInfodata.portrait;
          if (this.userInfodata.id == this.userInfo.id) {
            this.isown = true;
            this.title = "我的主页";
          } else {
            this.isown = false;
            this.title = "TA的主页";
          }
        });
    },
    follow() {
      controller
        .follow({
          followedUserId: this.userId,
        })
        .then((res) => {
          Toast({
            message: "关注成功！",
            duration: 1500,
          });
          this.data.userInfodata.followed = 1;
          this.userInfodata = this.userInfodata;
        })
        .catch((res) => {
          this.userInfodata.followed = 1;
          this.userInfodata = this.userInfodata;
        });
    },
    delFollow() {
      controller
        .delFollow({
          followedUserIds: this.userId,
        })
        .then((res) => {
          Toast({
            message: "取消关注成功！",
            duration: 1500,
          });
          this.userInfodata.followed = 0;
          this.userInfodata = this.userInfodata;
        })
        .catch((res) => {
          this.data.userInfodata.followed = 0;
          this.userInfodata = this.userInfodata;
        });
    },
    share() {
      this.$router.push({
        name: "BaskInTheSun",
      });
    },
    albumnav(index) {
      this.albumnavcurrent = index;
      this.audioListdata = [];
      this.ids = [];
      this.page = 1;
      this.pageSize = 10;
      this.isEnd = false;
      this.isallselect = false;
      this.isselect = false;
      this.historyList();
    },
    playall(index) {
      let i = 0;
      if (index) {
        i = index;
      }
      this.$store.commit("setCurrentIndex", i);
      this.$store.commit("setSonglist", this.audioListdata);
      // app.globalData.currentIndex = index;
      console.log("playall", index);
      this.$router.push({
        path: "/Playing?talentUserId=" + this.userId,
      });
    },
    // 全选
    alldelete() {
      var ids = [];
      var isallselect = this.isallselect;
      if (!isallselect) {
        for (let item of this.audioListdata) {
          item.select = 1;
          if ((this.albumnavcurrent = 1)) {
            ids.push(item.historyId);
          } else {
            ids.push(item.rid + "-" + item.type + "-" + item.id);
          }
        }
        isallselect = true;
      } else {
        ids = [];
        for (let item of this.audioListdata) {
          item.select = 0;
        }
        isallselect = false;
      }
      this.ids = ids;
      this.audioListdata = this.audioListdata;
      this.isallselect = isallselect;
    },
    deleteBtn() {
      console.log("deleteBtn");
      var content = "";
      if (this.albumnavcurrent == 1) {
        content = "删除选中的音频不可恢复";
      } else {
        content = "确定取消选中的关注？";
      }
      MessageBox.confirm(content).then((action) => {
        console.log("action.confirm", action, action == "confirm");
        if (action == "confirm") {
          if (this.albumnavcurrent == 1) {
            this.removeHistory();
          } else {
            this.delCollect();
          }
        }
      });
    },
    removeHistory() {
      var ids = this.ids.split(",");
      controller
        .removeHistory({
          ids: ids,
        })
        .then((res) => {
          Toast({
            message: "移除成功！",
            duration: 1500,
          });
          this.historyList();
        });
    },
    // 多选
    isselectBtn() {
      this.isselect = !this.isselect;
    },
    select(id, index) {
      console.log(id, index);
      var ids = this.ids;
      if (this.audioListdata[index].select == 1) {
        this.audioListdata[index].select = 0;
        ids.splice(index, 1);
      } else {
        this.audioListdata[index].select = 1;
        ids.push(id);
      }
      this.ids = ids;
      this.audioListdata = this.audioListdata;
    },
    // 上拉加载
    infinite(done) {
      setTimeout(() => {
        if (this.isEnd) {
          console.log(
            "这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈"
          );
          this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        } else {
          console.log("进行下一次加载操作");
          this.isEnd = true;
          done(); //进行下一次加载操作
        }
      }, 1500);
    },
    goToCommentDetail(rid, bodyId, bodyType, action) {
      console.log("跳转到评论详情页", e);
      if (action == 3) {
        // 音频的id（或者栏目，合辑等的id） 音频的（或者栏目，合辑等的type）type bodyId
        wx.navigateTo({
          url: "/pages/Comment/Comment?rid=" + bodyId + "&type=" + bodyType,
        });
      }
    },
    historyList() {
      if (this.albumnavcurrent == 1) {
        controller
          .historyList({
            userId: this.userId,
            page: this.page,
            pageSize: this.pageSize,
          })
          .then((res) => {
            console.log("历史听单", res);
            if (
              res.baseData &&
              res.baseData.list &&
              res.baseData.list.length > 0
            ) {
              for (let item of res.baseData.list) {
                item.select = 0;
              }
              this.audioListdata = this.audioListdata.concat(res.baseData.list);
              if (res.baseData.lastPage) {
                this.isEnd = true;
              }
            }
          });
      }
      if (this.albumnavcurrent == 2) {
        controller
          .collectList({
            userId: this.userId,
            page: this.page,
            pageSize: this.pageSize,
          })
          .then((res) => {
            console.log("我的收藏", res);

            if (
              res.baseData &&
              res.baseData.list &&
              res.baseData.list.length > 0
            ) {
              this.audioListdata = this.audioListdata.concat(res.baseData.list);
              if (res.baseData.lastPage) {
                this.isEnd = true;
              }
            }
          });
      }
      if (this.albumnavcurrent == 3) {
        let data = {};
        if (this.userId != this.userInfo.id) {
          console.log("他人");
          // 他人
          data = {
            userId: this.userId,
            page: this.page,
            pageSize: this.pageSize,
          };
        } else {
          // 是自己
          data = {
            page: this.page,
            pageSize: this.pageSize,
          };
        }
        controller.userActionList(data).then((res) => {
          console.log("历史互动", res);
          if (
            res.baseData &&
            res.baseData.list &&
            res.baseData.list.length > 0
          ) {
            this.audioListdata = this.audioListdata.concat(res.baseData.list);
            if (res.baseData.lastPage) {
              this.isEnd = true;
            }
          }
        });
      }
    },
    delCollect() {
      var ids = this.ids.join(",");
      console.log("this.ids", this.ids, ids);

      controller
        .delPlayCollect({
          ids: ids,
        })
        .then((res) => {
          Toast({
            message: "取消成功！",
            iconClass: "icon icon-success",
            duration: 1500,
          });
          this.historyList();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.empty{
    text-align: center;
    color: #A8ACBB;
    font-size: 28rpx;
    padding: 60px 0 100px;
}
.pagebg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
  height: 646px;
  background-color: #fff;
  z-index: -1;
  filter: blur(40px);
}

.default {
  padding: 60px 24px 0;
  box-sizing: border-box;
  color: #fff;

  .aver {
    width: 150px;
    height: 150px;
    background: rgba(168, 172, 187, 1);
    border: 6px solid rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
    }
  }

  .left {
    overflow: hidden;
    height: 290px;
  }

  .name {
    font-size: 40px;
    margin-bottom: 15px;
    position: relative;

    .follow {
      color: #fff;
      min-width: 40px;
      font-size: 20px;
      margin-left: 10px;
      display: inline-template;
      height: 28px;
      line-height: 28px;
      text-align: center;
      padding: 1px 10px;
      background: rgba(230, 109, 77, 1);
      border-radius: 14px;
    }
  }

  .d {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .btn {
    display: inline-template;
    color: #fff;
    width: 176px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
  }

  .bottom {
    height: 100px;
    line-height: 100px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    clear: both;
    padding-left: 32px;

    .item {
      float: left;
      font-size: 26px;
      color: #fff;
    }

    .n {
      opacity: 0.6;
      margin-right: 10px;
    }

    .share {
      width: 122px;
      height: 80px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 40px 0px 0px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      flex-direction: column;
      line-height: 1.2;

      img {
        width: 36px;
        height: 36px;
      }
    }
  }
}

.default .name .level,
.default .name .cancelfollow {
  font-size: 20px;
  margin-left: 10px;
  display: inline-template;
  height: 28px;
  line-height: 28px;
  text-align: center;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 14px;
}

.lists {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  z-index: 10;
  background-color: #fff;
  border-radius: 20px 20px 0px 0px;

  .tabs {
    overflow: hidden;
    height: 108px;
    line-height: 108px;
    text-align: center;
    font-size: 30px;
    color: #a8acbb;
    border-bottom: #f2f2f2 1px solid;

    .item {
      float: left;
      width: 33.333%;
      position: relative;

      .cir {
        width: 24px;
        height: 10px;
        line-height: 24px;
        display: inline-block;
        position: absolute;
        z-index: 1;
        bottom: 19px;
        left: 0;
        right: 0;
        margin: auto;
        display: none;
      }
    }

    .on {
      color: #e66d4d;
      font-weight: 700;

      .cir {
        display: block;
      }
    }
  }

  .top {
    overflow: hidden;
    height: 96px;
    line-height: 96px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    position: relative;
    padding: 0 24px;

    .all {
      float: left;
      font-size: 32px;
      color: #323232;

      img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 10px;
      }
    }

    .isselect {
      color: #a8acbb;
      font-size: 24px;
      position: absolute;
      z-index: 10;
      right: 24px;
      top: 0;
      bottom: 0;
      margin: auto;

      &:before {
        content: "";
        height: 24px;
        width: 24px;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_duoxuan.png)
          no-repeat 0 0;
        background-size: 100%;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 8px;
      }
    }

    .allselect {
      color: #323232;
      font-size: 30px;
      float: left;

      &:before {
        content: "";
        height: 32px;
        width: 32px;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_xuanze.png)
          no-repeat 0 0;
        background-size: 100%;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 8px;
        display: inline-block;
      }
    }

    .on:before {
      background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan.png)
        no-repeat 0 0;
      background-size: 100%;
    }

    .alldelete {
      height: 48px;
      line-height: 48px;
      padding: 0 20px;
      border: 1px solid #ec7169;
      color: #ec7169;
      font-size: 26px;
      border-radius: 24px;
      display: inline-template;
      position: absolute;
      z-index: 10;
      right: 24px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .con {
    height: calc(100vh - (750px));
    position: relative;

    .scroll {
      height: calc(100vh - 750px) !important;
      /deep/ &._v-container{
        // height: auto !important;
        ._v-content{
          padding-bottom: 40px;
        }
      }
    }

    .item {
      padding: 16px 24px;
      overflow: hidden;
      position: relative;
    }

    .key {
      width: 40px;
      line-height: 80px;
      margin-right: 20px;
      float: left;
    }

    .select {
      height: 32px;
      width: 32px;
      background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_xuanze.png)
        no-repeat 0 0;
      background-size: 100%;
      vertical-align: middle;
      float: left;
      margin-top: 24px;
      margin-right: 33px;
    }

    .on {
      background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan.png)
        no-repeat 0 0;
      background-size: 100%;
    }

    .pic {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      margin-right: 24px;
      float: left;
      background-color: #eee;
      position: relative;
    }

    .pic1 {
      overflow: hidden;
      border-radius: 100%;

      img {
        border-radius: 8px;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
        background-color: #eee;
      }
    }

    .right {
      overflow: hidden;
    }

    .right1 {
      line-height: 80px;
      font-size: 28px;
    }

    .orange {
      color: #e66d4d;
    }

    .time {
      line-height: 80px;
      margin-left: 20px;
      color: #a8acbb;
      font-size: 20px;
      float: right;
    }

    .name {
      color: #323232;
      font-size: 32px;
      padding-right: 80px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      .look {
        color: #ec7169;
        font-size: 24px;
        width: 48px;
        height: 32px;
        text-align: center;
        border: 1px solid #ec7169;
        line-height: 32px;
        vertical-align: middle;
        margin-left: 10px;
        display: inline-template;
        border-radius: 4px;
      }
    }

    .nums {
      color: #a8acbb;
      font-size: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .play {
      width: 70px;
      height: 70px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 22px;
      margin: auto;
      z-index: 1;
    }
  }
}
</style>
